<template>
  <div>
    <div class="inftop flex plr-24 pt-24 pd-28" @click="goDetail(bussinessItem.ID)">
        <img-box class="boxsd is-160 br-16 flex-s-0" :img-url="bussinessItem.Logo" />
        <div class="flex flex-s-s flex-d-c ml-24">
            <div class="itut">
                <div class="fs-32 toe lh color-dark">{{ bussinessItem.Name }}（{{ bussinessItem.StreetName }}）</div>
                <p class="fs-24 toe lh-xs color-dark mt-10">营业时间：{{ bussinessItem.BusinessHours ? bussinessItem.BusinessHours : '未知' }}</p>
            </div>
            <div class="ittag">
                <span class="dib fs-20 color-primary lh-36 plr-12 mr-12 bd-solid border-primary">全国连锁</span>
                <span class="dib fs-20 color-primary lh-36 plr-12 mr-12 bd-solid border-primary">必备单品</span>
                <span class="dib fs-20 color-primary lh-36 plr-12 mr-12 bd-solid border-primary">应季新品</span>
            </div>
        </div>
    </div>
    <div class="flex flex-s-s flex-center pl-24 pt-18 pr-32 pb-14"
        :style="{backgroundImage:'url('+require('@/assets/images/teaHouse/map.png')+')',backgroundSize:'100% 100%'}">
        <div>
            <p class="fs-24 text-show-line-1 lh-34 color-dark width-66">{{ bussinessItem.DetailAddress ? bussinessItem.DetailAddress+" " : '未知 ' }}</p>
            <span class="fs-24 lh-34 color-gray-light mt-4">距您：{{ $utils.distanceChange(bussinessItem.distance) }}</span>
        </div>
        <div class="flex">
            <a :href="'tel:'+bussinessItem.ContactTel" class="flex flex-d-c flex-h-c mr-32">
                <div class="is-32"
                    :style="{backgroundImage:'url('+require('@/assets/images/teaHouse/phone.png')+')',backgroundSize:'100% 100%'}">
                </div>
                <div class="fs-24 color-gray-light lh-34 mt-4">电话</div>
            </a>
            <div class="flex flex-d-c flex-h-c" @click.stop="navigation">
                <div class="is-32"
                    :style="{backgroundImage:'url('+require('@/assets/images/teaHouse/dao.png')+')',backgroundSize:'100% 100%'}">
                </div>
                <div class="fs-24 color-gray-light lh-34 mt-4">导航</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
  name: 'BussinessDetailItem',
  components: {
    imgBox
  },
  props: {
    bussinessItem: {
      type: Object,
      default: () => ({
        ID: 1,
        Logo: '',
        Name: '',
        BusinessHours: '',
        ContactTel: '',
        TagsList: [],
        DetailAddress: '',
        distance: 0,
        isLike: true
      })
    },
    type: {
      type: String,
      default: 'detail'
    }
  },
  data() {
    return {
      show: false
    }
  },
  watch: {},
  created() {},
  methods: {
    // 查看店铺详情
    goDetail(id) {
      console.log(this.type)
      this.$emit('goDetail', id)
    },
    like() {
      this.bussinessItem.isLike = !this.bussinessItem.isLike
    },
    navigation(event) {
      // 打开导航
      this.$emit('navigation')
    }
  }
}
</script>

<style lang="scss" scoped>
.boxsd {
    box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.16);
}
.alliance {
  margin-bottom: 10px;
  .max-width {
    max-width: 414px;
    padding: 0 10px;
  }
}
.distance{
  width: 115px;
  text-align: right;
}
.nearbyStore {
  margin-bottom: 20px;
  .name-box {
    max-width: calc(100% - 112px);
  }
}
.nearbyStore,
.detail {
  .max-width {
    max-width: 530px;
    padding-left: 20px;
  }
}
.max-height {
  overflow: hidden;
  max-height: 78px;
}
.isLike,
.notLike {
  font-size: 24px;
  height: 48px;
  line-height: 48px;
  padding: 0 30px;
}
.notLike {
  @include bg-primary();
  border: none;
}
.isLike {
  @include color-primary();
  border: 1px solid currentColor;
  line-height: 44px;
}
.arrow:after {
  right: 35px;
  top: 10px;
}
</style>
